
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3自定义滚动条图片版-轩枫阁</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    #container{
        width: 100%;
        height: 1200px;
        line-height: 600px;
        text-align: center;
        background: #ccc;
    }
    /*定义滚动条的高宽*/
    ::-webkit-scrollbar {
        width: 16px;
        height: 16px;
    }
    /*CSS的坐标系，左上角为(0,0),往右往下为增加，往上往左为减少*/
    /*显示滚动条上方的渐增按钮*/
    ::-webkit-scrollbar-button:start:decrement,
    /*显示滚动条上方的渐减按钮*/
    ::-webkit-scrollbar-button:end:increment {
        display: block;
    }
    /*隐藏滚动条上方的渐增按钮*/
    /*::-webkit-scrollbar-button:vertical:start:increment,
    ::-webkit-scrollbar-button:vertical:end:decrement {
        display: none;
    }*/
    /* 定义滚动条渐增按扭的样式 */
    ::-webkit-scrollbar-button:end:increment {
        background-image: url(http://www.xuanfengge.com/demo/201311/scroll/images/scroll_cntrl_dwn.png);
    }
    /* 定义滚动条渐减按扭的样式 */
    ::-webkit-scrollbar-button:start:decrement {
        background-image: url(http://www.xuanfengge.com/demo/201311/scroll/images/scroll_cntrl_up.png);
    }
    /* 垂直滚动条的第三层轨道的上段 */
    ::-webkit-scrollbar-track-piece:vertical:start {
        background-image: url(http://www.xuanfengge.com/demo/201311/scroll/images/scroll_gutter_top.png), url(http://www.xuanfengge.com/demo/201311/scroll/images/scroll_gutter_mid.png);
        background-repeat: no-repeat, repeat-y;
    }
    /* 垂直滚动条的第三层轨道的下段 */
    ::-webkit-scrollbar-track-piece:vertical:end {
        background-image: url(http://www.xuanfengge.com/demo/201311/scroll/images/scroll_gutter_btm.png), url(http://www.xuanfengge.com/demo/201311/scroll/images/scroll_gutter_mid.png);
        background-repeat: no-repeat, repeat-y;
        background-position: bottom left, 0 0;
    }
    /* 垂直滚动条的滑动块 */
    ::-webkit-scrollbar-thumb:vertical {
        height: 56px;
        -webkit-border-image: url(http://www.xuanfengge.com/demo/201311/scroll/images/scroll_thumb.png) 8 0 8 0 stretch stretch;
        border-width: 8 0 8 0;
    }

    </style>
</head>
<body>
    <div id="container">CSS3自定义滚动条图片版<br/>请在chrome下看右侧滚动条，其他浏览器没有效果哦</div>
    <pre>
        :horizontal
        //horizontal伪类适用于任何水平方向上的滚动条
         
        :vertical
        //vertical伪类适用于任何垂直方向的滚动条
         
        :decrement
        //decrement伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片，例如可以使区域向上或者向右移动的区域和按钮
         
        :increment
        //increment伪类适用于按钮和轨道碎片。表示递增的按钮或轨道碎片，例如可以使区域向下或者向左移动的区域和按钮
         
        :start
        //start伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的前面
         
        :end
        //end伪类适用于按钮和轨道碎片。表示对象（按钮 轨道碎片）是否放在滑块的后面
         
        :double-button
        //double-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。也就是轨道碎片紧挨着一对在一起的按钮。
         
        :single-button
        //single-button伪类适用于按钮和轨道碎片。判断轨道结束的位置是否是一个按钮。也就是轨道碎片紧挨着一个单独的按钮。
         
        :no-button
        no-button伪类表示轨道结束的位置没有按钮。
         
        :corner-present
        //corner-present伪类表示滚动条的角落是否存在。
         
        :window-inactive
        //适用于所有滚动条，表示包含滚动条的区域，焦点不在该窗口的时候。
         
        ::-webkit-scrollbar-track-piece:start {
        /*滚动条上半边或左半边*/
        }
         
        ::-webkit-scrollbar-thumb:window-inactive {
        /*当焦点不在当前区域滑块的状态*/
        }
         
        ::-webkit-scrollbar-button:horizontal:decrement:hover {
        /*当鼠标在水平滚动条下面的按钮上的状态*/
        }
    </pre>
</body>
</html>